<!-- 【示例4-12】使用 provide和inject 实现祖孙三代通信
孙子组件 GrandChildCom, vue: -->
<template>
    <div>
        GrandChildCom
        <p>{{ message }} </p>
    </div>
</template>
<script>
export default {
    inject: ["message"]//从父组件中注入message 属性
};
</script>
<!-- 子组件 ChildCom. vue: -->
<template>
<div>
ChildCom
<p>{{message}} </p>
<GrandchildCom></GrandchildCom>
</div>
</template>
<script>
import GrandchildCom from " . /GrandChildCom. vue";
export default{
    components :{
    GrandchildCom
},

inject:["message"]//从父组件中注入 message 属性
};
</script>
<!-- 上述子组件中，引人 GrandchildCom作为子组件，使用imject选项接收来自的message属性，并渲染在页面上。
父组件 App.vue: -->
<template>
    <div>
        <ChildCom></ChildCom>
    </div>
</template>
<script>
import ChildCom from " ./components/ChildCom. vue" ;
export default{
    components :{
    ChildCom
},
provide:{
message : ' Hello from parent'
}
}
};
</script>